<template>
	<view class="single-img-upload-container" @click="handleUploadImg">
		<view class="image-wrapper" :class="[bgClassName]">
			<view v-if="existImg" class="close-btn" @click.stop="handleDel"></view>
			<image v-if="existImg" :src="value" @click.stop="handlePreView" ></image>	
		</view>
		<view class="pre-view-wrapper" v-if="showPreView" @click.stop="showPreView = false">
			<image :src="value" mode="widthFix" ></image>	
		</view>		
	</view>
</template>

<script>
	export default {
		name:"SingleImgUpload",
		props:{
			bgClassName: {
				type: String,
				default: () => ""
			},
			disabled: {
				type: Boolean,
				default: () => false,
			},
			value: {
				type: String,
				default: () => ""
			},
			prop: {
				type: String,
				default: () => ""
			}
		},
		data() {
			return {
				showPreView: false,
			};
		},
		computed:{
			existImg(){
				return Boolean(this.value)
			}
		},
		methods:{
			// 预览
			handlePreView(){
				this.showPreView = true;
			},
			// 开始上传
			handleUploadImg(){
				let _this = this;
				uni.chooseImage({ // 最多上传六张
					count:1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: (res) => {
						_this.$emit("input", res.tempFilePaths[0])
					}
				});
			},
			handleDel(){
				this.$emit("input", "")
			}
		}
	}
</script>

<style lang="scss" scoped>
.single-img-upload-container{
	// background-color: #fff;
	.image-wrapper{
		position: relative;
		width: 320rpx;
		height: 200rpx;
		background-size: 100% 100%;
		background: #dedede;
		image{
			width: 100%;
			height: 100%;
		}
		.close-btn{
			position: absolute;
			top: 0;
			right: 0;
			width: 40rpx;
			height: 40rpx;
			background-image: url("@/static/images/close.png");
			background-size: 100% 100%;
		}
	}
	.pre-view-wrapper{
		width: 100vw;
		height: 100vh;
		position: absolute;
		top: 0;
		left: 0;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}
</style>